<!doctype html>
<html lang="en">
<!--[if IE 9 ]>
<html  lang="en" class="ie9">
<![endif]-->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>服务端KPI</title>
    <!-- CSS -->
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="customcss/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/generics.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap-table.css">
    <link rel="stylesheet" href="customcss/bootstrap-table-self.css">
</head>
<body>
<header id="header" class="navbar navbar-fixed-top">
    <a href="" id="menu-toggle"></a>
    <a class="logo pull-left" href="index.html">
        <img src="images/logo.png" alt="logo">
    </a>
    <div class="media-body">
        <div class="media" id="top-menu">
            <div class="pull-left tm-icon">
                <a data-drawer="messages" class="drawer-toggle" href="">
                    <i class="sa-top-message"></i>
                    <span>时间回溯</span>
                </a>
            </div>
            <div class="pull-left tm-icon">
                <a data-drawer="notifications" class="drawer-toggle" href="">
                    <i class="sa-top-updates"></i>
                    <span>帮助</span>
                </a>
            </div>
            <div id="time" class="pull-right">
                <span id="hours"></span>
                :
                <span id="min"></span>
                :
                <span id="sec"></span>
            </div>
            <div class="media-body">
                <input type="text" class="main-search">
            </div>
        </div>
    </div>
</header>
<div class="clearfix"></div>
<section id="main" class="p-relative" role="main">
    <!-- Sidebar -->
    <aside id="sidebar" class="navbar navbar-fixed-top">
        <!-- Side Menu -->
        <ul class="list-unstyled side-menu">
            <li>
                <a class="sa-side-home" href="index.html">
                    <span class="menu-item">首页</span>
                </a>
            </li>
        </ul>
    </aside>
    <!-- Content -->
    <section id="content" class="container">
        <!-- Messages Drawer时间回溯 -->
        <div id="messages" class="tile drawer animated">
            <div class="listview narrow">
                <div class="media">
                    <a href="">时间回溯</a>
                    <span class="drawer-close">&times;</span>
                </div>
                <div class="overflow" style="height: 254px">
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - 2 Hours ago</small><br>
                            <a class="t-overflow" href="">Mauris consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - 5 Hours ago</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/3.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Harris worgon - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/4.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Mitch Bradberry - On 14/12/2013</small><br>
                            <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Ipsum wintoo consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - On 16/12/2013</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/3.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Harris worgon - On 17/12/2013</small><br>
                            <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/4.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Mitch Bradberry - On 18/12/2013</small><br>
                            <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/5.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Wendy Mitchell - On 19/12/2013</small><br>
                            <a class="t-overflow" href="">Integer a eros dapibus, vehicula quam accumsan, tincidunt purus</a>
                        </div>
                    </div>
                </div>
                <div class="media text-center whiter l-100">
                    <a href=""><small>VIEW ALL</small></a>
                </div>
            </div>
        </div>
        <!-- Notification Drawer帮助 -->
        <div id="notifications" class="tile drawer animated">
            <div class="listview narrow">
                <div class="media">
                    <a href="">帮助</a>
                    <span class="drawer-close">&times;</span>
                </div>
                <div class="overflow" style="height: 254px">
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - 2 Hours ago</small><br>
                            <a class="t-overflow" href="">Mauris consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - 5 Hours ago</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/3.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Harris worgon - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/4.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Mitch Bradberry - On 14/12/2013</small><br>
                            <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Ipsum wintoo consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - On 16/12/2013</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                </div>
                <div class="media text-center whiter l-100">
                    <a href=""><small>VIEW ALL</small></a>
                </div>
            </div>
        </div>
        <!-- Breadcrumb -->
        <div class="block-area">
            <div class="table-responsive overflow tableMinH">
                <span class="block-title blockHead cursor">
                    观察点KPI
                    <i class="glyphicon glyphicon-minus"></i>
                </span>
                <div class="togglebox">
                    <table id="table7"></table>
                </div>
            </div>
            <div class="table-responsive overflow tableMinH">
                <span class="block-title blockHead cursor">
                    服务端KPI
                    <i class="glyphicon glyphicon-minus"></i>
                </span>
                <div class="togglebox">
                    <table id="serverSidekpi"></table>
                </div>
            </div>
            <div class="table-responsive overflow tableMinH">
                <span class="block-title blockHead cursor">
						用户端KPI
                    <i class="glyphicon glyphicon-minus"></i>
                </span>
                <div class="togglebox">
                    <table id="userSidekpi"></table>
                </div>
            </div>
        </div>
        <div class="block-area">
				<div class="drawpos" style="margin-left:-10px;margin-right: -10px;">
					<div class="pointline">
						<div class="modal fade in" id="addNew-event" tabindex="-1"
							role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content" style="background: #000;">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="myModalLabel">选择日期</h4>
									</div>
									<div class="modal-body">
										<div class="form-horizontal">
											<div class="form-group">
												<label for="historyTime" class="col-md-2 control-label">
													历史时间段: </label>
												<div class="col-md-9">
													<select class="form-control" id="historyTime"
														style="background: rgba(0, 0, 0, 0.0);">
														<option>10分钟</option>
														<option>30分钟</option>
														<option>1小时</option>
														<option>2小时</option>
														<option>4小时</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<lable for="lineTimejg" class="col-md-2 control-label">线图点间隔:</lable>
												<div class="col-md-9">
													<select class="form-control" id="lineTimejg"
														style="background: rgba(0, 0, 0, 0.0);">
														<option>10秒</option>
														<option>1分钟</option>
														<option>10分钟</option>
														<option>1小时</option>
														<option>1天</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<lable class="col-md-2 control-label">开始时间:</lable>
												<div class="col-md-9">
													<input type="text"
														class="form-control input-sm workinput wicon"
														id="modalStarTime" readonly>
												</div>
											</div>
											<div class="form-group">
												<lable class="col-md-2 control-label">结束时间:</lable>
												<div class="col-md-9">
													<input type="text" class="form-control input-sm"
														id="modalEndtime" readonly>
												</div>
											</div>
										</div>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default"
											data-dismiss="modal">关闭</button>
										<button type="button" class="btn btn-primary"
											data-dismiss="modal" id="subTimemodal"
											style="margin-right: 40px;">提交更改</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="linedraw" onselectstart="return false;" style="user-select:none;height: 32.2rem; position: relative;margin-left: 2px;margin-right:3px;margin-top:10px;">
							<img src="../images/append.png" style="padding-top: 8em;"
								id="list-draw" class="center-block" data-toggle="modal"
								data-target="#listDraw">
							<div class="modal fade" id="listDraw" tabindex="-1" role="dialog"
								aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="myModalLabel2">绘图列表</h4>
										</div>
										<div class="modal-body" style="padding: 0px;">
											<div class="list-content"></div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default"
												data-dismiss="modal">关闭</button>
											<button type="button" class="btn btn-primary" id="list-save"
												style="margin-right: 10%;">确定</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>
    <!-- Older IE Message -->
    <!--[if lt IE 9]>
    <div class="ie-block">
        <h1 class="Ops">抱歉！</h1>
        <p>您正在使用一个过时的Internet Explorer版本，升级到以下任何Web浏览器，以便访问该网站的最大功能。 </p>
        <ul class="browsers">
            <li>
                <a href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html">
                    <img src="img/browsers/chrome.png" alt="">
                    <div>Google Chrome</div>
                </a>
            </li>
            <li>
                <a href="http://www.firefox.com.cn/">
                    <img src="img/browsers/firefox.png" alt="">
                    <div>Mozilla Firefox</div>
                </a>
            </li>
            <li>
                <a href="http://www.oupeng.com/download">
                    <img src="img/browsers/opera.png" alt="">
                    <div>Opera</div>
                </a>
            </li>
            <li>
                <a href="https://www.apple.com/cn/safari/">
                    <img src="img/browsers/safari.png" alt="">
                    <div>Safari</div>
                </a>
            </li>
            <li>
                <a href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads">
                    <img src="img/browsers/ie.png" alt="">
                    <div>Internet Explorer(New)</div>
                </a>
            </li>
        </ul>
        <p>升级你的浏览器更安全和更快的网络体验。 <br/>感谢你的支持...</p>
    </div>
    <![endif]-->
</section>
</body>
</html>
<!-- jQuery -->
<script src="js/jQuery/jquery.min.js"></script> <!-- jQuery Library -->
<!-- Bootstrap -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- Bootstrap-table -->
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>
<script src="js/bootstrap/bootstrap-table-export.js"></script>
<script src="js/bootstrap/tableExport.js"></script>
<script src="js/functions.js"></script>
<script src="customjs/changeBackground.js"></script>
<script src="customjs/sidebar.js"></script>
<script src="js/echarts/echarts.min.js"></script>
<script src="js/echarts/theme/macarons.js"></script>
<script src="customjs/echartUtil/data.format.js"></script>
<script src="customjs/echartUtil/echart.util.js"></script>
<script src="customjs/draw.js"></script>
<script src="customjs/bsTable/kpitable.js"></script>
<script>
    $(function(){
        var selectRow = window.location.href.split("?")[1].split("&")[0].split("=")[1]-0,
                selectDataId = window.location.href.split("?")[1].split("&")[1].split("=")[1]-0;

        function temp(){
            var obPointkpi = {
                clickTableRow:function(tableName,rowId,element,appBusinessId){
                    var watchPointId;
                    if(!$("#table7 .tabRowClickbg").attr("data-id")){
                        $.ajax({
                            url:"/commonController/getNpmListRrdData.do",
                            type:"post",
                            async:false,
                            data:{"moduleId":10},
                            dataType:"json",
                            success:function(data){
                                watchPointId = data[0].id;
                            }
                        })
                    }else {
                        watchPointId = $("#table7 .tabRowClickbg").attr("data-id")
                    }
                    function updataUser(moduleId,url,watchPointId,appBusinessId){
                        $("#userSidekpi").bootstrapTable("showLoading");
                        $(".fixed-table-loading").css("line-height",$(".fixed-table-loading").height()+"px");
                        $.ajax({
                            url:url,
                            type:"post",
                            data:{
                                "moduleId":moduleId,
                                "watchPointId":watchPointId,
                                "appBusinessId":appBusinessId,
                                "starttime":1505892630,
                                "endtime":1505960881
                            },
                            dataType:"json",
                            success:function(data){
                                $("#userSidekpi").bootstrapTable("hideLoading");
                                $("#userSidekpi").bootstrapTable("load",data);
                            }
                        });
                    }
                    function updataServer(moduleId,url,watchPointId,appBusinessId){
                        $("#serverSidekpi").bootstrapTable("showLoading");
                        $(".fixed-table-loading").css("line-height",$(".fixed-table-loading").height()+"px");
                        $.ajax({
                            url:url,
                            type:"post",
                            data:{
                                "moduleId":moduleId,
                                "watchPointId":watchPointId,
                                "appBusinessId":appBusinessId,
                                "starttime":1505892630,
                                "endtime":1505960881
                            },
                            dataType:"json",
                            success:function(data){
                                $("#serverSidekpi").bootstrapTable("hideLoading");
                                $("#serverSidekpi").bootstrapTable("load",data);
                            }
                        })
                    }
                    switch (tableName){
                        case "userSidekpi":
                            $("#"+tableName+" .tabRowClickbg").removeClass("tabRowClickbg");
                            $(element).addClass("tabRowClickbg");
                            updataServer(11,
                                    "/commonController/getNpmListRrdDataBySubPath.do",
                                    watchPointId,
                                    appBusinessId);
                            break;
                        case "serverSidekpi":
                            $("#"+tableName+" .tabRowClickbg").removeClass("tabRowClickbg");
                            $(element).addClass("tabRowClickbg");
                            updataUser(12,
                                    "/commonController/getNpmListRrdDataBySubPath.do",
                                    watchPointId,
                                    appBusinessId);
                            break;
                        default:
                            $(".tabRowClickbg").removeClass("tabRowClickbg").removeAttr("data-id");
                            $(element).addClass("tabRowClickbg").attr("data-id",rowId);
                            updataUser(11,
                                    "commonController/getNpmListRrdData.do",
                                    rowId
                            );
                            updataServer(12,
                                    "commonController/getNpmListRrdData.do",
                                    rowId
                            );
                            break;
                    }
                },
                modulkpi:function(userColumnurl,modolkpiurl,tableId,ajaxData){
                    $.ajax({
                        url:userColumnurl,
                        type:"post",
                        data:"",
                        dataType:"json",
                        success:function(data){
                            var columnsArry = [];
                            data.forEach(function(title){
                                if(title.columnen!="id"){
                                    var colObjet = {
                                        field:title.columnen,
                                        title:title.columnzh+"<span data-columnId='"+title.id+"'></span>",
                                        sortable:true,
                                        visible:title.checked
                                    };
                                    columnsArry.push(colObjet);
                                }
                            });
                            $(tableId).bootstrapTable({
                                url:modolkpiurl,
                                queryParams:function(params){
                                    return ajaxData;
                                },
                                toggle:"table",
                                pagination:true,
                                showColumns:true,
                                showExport:true,
                                search:true,
                                columns:columnsArry,
                                onClickRow:function(data,rowElement){
                                    if(tableId=="#table7"){
                                        obPointkpi.clickTableRow(null,data.id,rowElement);
                                    }else if(tableId=="#serverSidekpi"){
                                        obPointkpi.clickTableRow("serverSidekpi",
                                                null,
                                                rowElement,
                                                data.id);
                                        selectDataId = data.id;
                                        _chart._createChart(12,selectDataId);
                                    }
                                },
                                onColumnSwitch:function(field,checked){
                                    $.ajax({
                                        url:userColumnurl,
                                        type:"post",
                                        data:"",
                                        dataType:"json",
                                        success:function(culumnData){
                                            culumnData.forEach(function(item,index){
                                                if(item.columnen==field){
                                                    $.ajax({
                                                        url:checked?"userConfigure/checkedUserListColumn.do":
                                                                "userConfigure/unCheckedUserListColumn.do",
                                                        type:"post",
                                                        data:{columnId:item.id},
                                                        dataType:"text",
                                                        success:function(data){
                                                        }
                                                    })
                                                }
                                            })
                                        }
                                    })
                                },
                                rowStyle:function(row,index){
                                    if(tableId=="#table7"){
                                        if(index==0){
                                            return {classes:"tabRowClickbg"}
                                        }
                                    }
                                    if(tableId=="#serverSidekpi"){
                                        if(index==selectRow){
                                            return {classes:"tabRowClickbg"}
                                        }
                                    }
                                    return "";
                                },
                                onLoadSuccess:function(data){
                                    if(selectRow>9){
                                        $("#serverSidekpi").bootstrapTable('selectPage', Math.ceil((selectRow+1)/10));
                                    }
                                }
                            });
                        }
                    });
                }
            };
        }





        /*-------用户刚刚进入此页面时触发的事件------------------*/
//        watchPointId,moduleId,starttime,endtime
        $.ajax({
            url:"/commonController/getNpmListRrdData.do",
            type:"post",
            data:{
                "moduleId":10
            },
            dataType:"json",
            success:function(data){
                obPointkpi.modulkpi("/watchpointController/getWatchpointUserListColumn.do",
                        "/commonController/getNpmListRrdData.do",
                        "#table7",
                        {
                            "watchPointId": data[0].id,
                            "moduleId":10,
                            "starttime":1505892630,
                            "endtime":1505960881
                        },selectRow,selectDataId,1);//观察点
                obPointkpi.modulkpi("/client/getClientUserListColumn.do",
                        "/commonController/getNpmListRrdData.do",
                        "#userSidekpi",
                        {
                            "watchPointId": data[0].id,
                            "moduleId":11,
                            "starttime":1505892630,
                            "endtime":1505960881
                        },selectRow,selectDataId);//用户端
                obPointkpi.modulkpi("/serverManagement/getServerSideUserListColumn.do",
                        "/commonController/getNpmListRrdData.do",
                        "#serverSidekpi",
                        {
                            "watchPointId": data[0].id,
                            "moduleId":12,
                            "starttime":1505892630,
                            "endtime":1505960881
                        },selectRow,selectDataId,1);//服务端
            }
        });
        _chart._createChart(12,selectDataId);
        $("#list-draw").off("click").on("click",function(){
            _chart._kpiSelectM(12);
        });
        $("#list-save").click(function(){
            _chart._saveJson(12,selectDataId);
        });
        $(window).resize(function(){
            _chart._resizChart();
        });
    });

</script>